@import '../fonts/iconfont.css';
@import "./animation";
@import "./gridMenu";
@import "./gridBase";
@import "./gridLoading";
@import "./gridPage";
@import "./gridConfig";
@import "./mixins";

@table-border: 1px solid #e8e8e8;
@font-normal-size: 12px;
@font-family: arial !important;
/* table所在的DIV */
.table-wrap {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border: @table-border;
    &.disable-border {
        border: none;
    }
    .table-div {
        overflow: auto;
        /* 自定义滚动条样式 */
        &::-webkit-scrollbar-track {
            border-radius: 5px;
            background-color: #f3f3f3;
        }
        &::-webkit-scrollbar-track-piece {
            display: none;
        }
        &::-webkit-scrollbar {
            background: transparent;
            width: 10px;
            height: 10px;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: #e1e1e1;
            width: 6px;
            height: 6px;
            border: 2px solid transparent;
            background-clip: content-box;
        }
        /* 配置列表功能 */
        .config-editing {
            overflow-x: hidden;
        }
        /* table */
        table[grid-manager] {
            table-layout: fixed;
            word-wrap: break-word;
            text-align: center;
            width: 100%;
            border-collapse: collapse;
            font-family: @font-family;
            tr {
                border-bottom: @table-border;
                th:last-child,
                td:last-child {
                    border-right: none;
                }
            }
            th {
                text-align: center;
                margin: 0;
                padding: 0;
                line-height: 18px;
                .bg-image();
                &:hover {
                    background-color: #e0e0e0;
                }
                &[th-visible="none"] {
                    display: none;
                }
                &[th-visible="visible"] {
                    display: table-cell;
                }
                &[remind] .th-wrap {
                    padding-left: 20px;
                }
                &[sorting] .th-wrap {
                    padding-right: 20px;
                }
                &[filter] .th-wrap {
                    padding-right: 20px;
                }
                &[sorting][filter] .th-wrap { /*排序与表头筛选同时存在时，需要将样式重置*/
                    padding-right: 45px;
                    .sorting-action{
                        right: 25px;
                    }
                }
                &[gm-create="true"] {
                    background-color: #f3f3f3;
                    .th-wrap {
                        padding: 6px 4px;
                    }
                }
                .th-wrap {
                    /*减去的1px 为border-right. 原因是table元素存在特殊性, thead浮动后border的宽度不会计算到th内,而是会在原基础上将th的宽加1. */
                    width: calc(100% - 1px);
                    height: 100%;
                    position: relative;
                    padding: 6px;
                    .th-text {
                        display: block;
                        width: 100%;
                        height: 100%;
                        .text-overflow();
                    }
                    .iconfont{
                        opacity: 0.7;
                        cursor: pointer;
                        &:hover{
                            opacity: 1;
                        }
                    }
                    /* 宽度调整事件源 */
                    .adjust-action {
                        display: block;
                        width: 6px;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        right: -4px;
                        cursor: col-resize;
                        z-index: 2;
                    }
                    /* 表头提醒 */
                    .remind-action {
                        width: 16px;
                        height: 16px;
                        position: absolute;
                        top: 6px;
                        left: 4px;
                        cursor: help;
                        .ra-area {
                            display: none;
                            min-width: 150px;
                            max-width: 300px;
                            position: absolute;
                            top: 80%;
                            left: 80%;
                            padding: 12px;
                            border: 3px solid #000;
                            z-index: 9999;
                            border-radius: 5px;
                            box-shadow: 3px 3px 10px 0 #222;
                            background-color: #000;
                            opacity: 0.8;
                            line-height: 14px;
                            color: #fff;
                            .ra-title {
                                display: block;
                                text-align: left;
                                margin-bottom: 4px;
                                font-weight: 600;
                                font-size: 1.1em;
                                color: #FF6;
                                .text-overflow();
                            }
                            .ra-con {
                                display: block;
                                font-weight: 500;
                                text-align: left;
                                font-size: 0.9em;
                                color: #fff;
                            }
                        }
                        .ra-icon {
                            display: block;
                            width: 16px;
                            height: 16px;
                            font-size: @font-normal-size;
                            line-height: 18px;
                            color: #666;
                        }
                        &:hover {
                            .ra-icon {
                                color: #2b669a;
                            }
                        }
                    }
                    /* 排序 */
                    .sorting-action {
                        display: block;
                        width: 14px;
                        height: 18px;
                        position: absolute;
                        top: 6px;
                        right: 5px;
                        cursor: default;
                        z-index: 2;
                        color: #444;
                        &:hover {
                            color: #000;
                        }
                        &.sorting-up {
                            .sa-up {
                                opacity: 1;
                            }
                            .sa-down {
                                opacity: 0.1;
                            }
                        }
                        &.sorting-down {
                            .sa-up {
                                opacity: 0.1;
                            }
                            .sa-down {
                                opacity: 1;
                            }
                        }
                        .sa-icon {
                            display: block;
                            height: 10px;
                            position: absolute;
                            font-size: @font-normal-size;
                            line-height: 10px;
                        }
                        .sa-up {
                            top: 0;
                            right: 0;
                        }
                        .sa-down {
                            bottom: 0;
                            right: 0;
                        }
                    }
                    /*表头的筛选菜单*/
                    .filter-action{
                        display: block;
                        width: 14px;
                        height: 18px;
                        position: absolute;
                        top: 6px;
                        right: 5px;
                        cursor: default;
                        z-index: 2;
                        color: #444;
                        .sa-icon {
                            display: block;
                            height: 10px;
                            position: absolute;
                            font-size: @font-normal-size;
                            line-height: 10px;
                        }
                        .fa-con{
                            display: none;
                            position: absolute;
                            top: 100%;
                            left: 0;
                            background: #fff;
                            border: 1px solid #ccc;
                            .filter-list{
                                li{
                                    padding: 5px 12px;
                                    > label{
                                        cursor: pointer;
                                        display: flex;
                                        word-break: keep-all;
                                        .filter-value{
                                            cursor: pointer;
                                            margin: 3px 0;
                                            .input-checkbox();
                                        }
                                        .filter-text{
                                            padding-left: 8px;
                                            color: rgba(0,0,0,.65);
                                        }
                                    }
                                    &:hover{
                                        background: #e6f7ff;
                                    }
                                }
                            }
                            .filter-bottom{
                                border-top: @table-border;
                                padding: 7px 8px;
                                text-align: center;
                                .filter-button{
                                    cursor: pointer;
                                    color: #1890ff;
                                    &:hover{
                                        color: #40a9ff;
                                    }
                                    &:first-child{
                                        margin-right: 10px;
                                    }
                                }
                            }
                        }
                    }
                    /* 拖拽换位 */
                    .drag-action {
                        cursor: all-scroll;
                    }
                }
            }
            td {
                text-align: left;
            }
            th, td {
                border-right: @table-border;
                &[th-visible="none"] {
                    display: none;
                }
                &[th-visible="visible"] {
                    display: table-cell;
                }
                /* 宽度调整选中 */
                &.adjust-selected {
                    border-right-width: 2px;
                    border-right-style: dashed;
                    border-right-color: #ccc;
                    &.drag-action {
                        cursor: col-resize;
                    }
                }
                /* 拖拽换位中 */
                &.drag-ongoing {
                    cursor: all-scroll;
                    &.opacityChange {
                        opacity: 1;
                        animation: opacityChange 1s ease-in-out infinite;
                    }
                }
                /* 文本对齐 */
                &[align] {
                    &[align="left"] {
                        text-align: left;
                    }
                    &[align="center"] {
                        text-align: center;
                    }
                    &[align="right"] {
                        text-align: right;
                    }
                }
                /* 由插件自动生成的序号 与 全选 */
                &[gm-create="true"] {
                    width: 50px;
                    text-align: center;
                    cursor: default;
                    &[gm-checkbox="true"] input[type=checkbox] {
                        vertical-align: middle;
                        .input-checkbox();
                    }
                }
            }
            thead {
                tr {
                    height: 40px;
                    line-height: 40px;
                }
                &.scrolling {
                    visibility: hidden;
                }
                /* 表头置顶 */
                &[grid-manager-mock-thead] {
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 2;
                    background-color: #ddd;
                    tr {
                        th {
                            /* 表头提醒 */
                            .remind-action {
                                .ra-area {
                                    visibility: hidden;
                                    display: none;
                                }
                                &:hover .ra-area {
                                    visibility: visible;
                                    display: block !important;
                                }
                            }
                        }
                    }
                }
            }
            tbody {
                tr {
                    /*顶部通栏*/
                    &[top-full-column="true"]{
                        border-bottom: none;
                        td{
                            padding: 0;
                            .full-column-td{
                                .bg-image();
                                margin-top: 10px;
                                //border-top: @table-border;
                                //border-left: @table-border;
                                //border-right: @table-border;
                            }
                        }
                    }
                    &[top-full-column="false"]{
                        td{
                            &:first-child{
                                //border-left: @table-border;
                            }
                            &:last-child{
                                //border-right: @table-border;
                            }
                        }
                    }
                    td {
                        .text-overflow();
                        background-color: #fff;
                        color: #3d3d3d;
                        padding: 4px;
                        vertical-align: middle; // TODO 20180528以前为top, 修正为middle
                        &[td-visible="none"] {
                            display: none;
                        }
                        &[td-visible="visible"] {
                            display: table-cell;
                        }
                        &[col-hover="true"] {
                            background-color: #f3f3f3;
                        }
                        &td[gm-create="true"] {
                            background-color: #f8f8f8;
                        }
                        /* 空模板样式 */
                        .gm-emptyTemplate {
                            width: 100%;
                            height: 80px;
                            line-height: 80px;
                            text-align: center;
                            font-size: 16px;
                            color: #ddd;
                        }
                    }
                    &[row-hover="true"] td {
                        background-color: #f3f3f3;
                        color: #000;
                    }
                    // 为空提示特殊处理, hover状态不高亮
                    &[emptytemplate] {
                        border: none;
                        &[row-hover] td {
                            background-color: #fff;
                        }
                    }
                }
            }
            &.disable-line {
                th, td{
                    border-right: none;
                }
            }
        }
    }
    // TODO 20180315: overflow-y=hidden时,对最后一列进行操作时. 界面会闪动
    &[user-interactive="Adjust"] .table-div {
        //overflow: hidden !important;
    }
    &[user-interactive="Drag"] .table-div {
        //overflow: hidden !important;
    }
    /* 导出excel */
    #gm-export-action {
        display: none;
    }

    /* 文本镜像：用于实时获取th的文本宽度 */
    .text-dreamland {
        position: absolute;
        top: 0;
        left: 0;
        white-space: nowrap;
        visibility: hidden;
        z-index: -1;
    }

    /* 拖拽换位镜象 */
    .dreamland-div {
        display: none;
        position: absolute;
        border: 1px solid #ccc;
        padding: 0;
        background: #fff;
        cursor: all-scroll;
        z-index: 9;
        .dreamland-table {
            table-layout: fixed;
            width: 100%;
            margin: 0 !important;
            padding: 0 !important;
            background-color: #d8d8d8;
            border-collapse: separate;
            border-spacing: 1px;
            font-size: @font-normal-size !important;
            font-family: @font-family;
            tr {
                th {
                    background-color: #f3f3f3;
                    text-align: center;
                    &:hover {
                        background-color: #e0e0e0;
                    }
                }
                td {
                    background-color: #fff;
                    color: #3d3d3d;
                    padding: 4px;
                    vertical-align: top;
                    text-align: left;
                    .text-overflow();
                }
            }
        }
    }

    /*遮罩*/
    .mask-element {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #000;
        opacity: 0.6;
        z-index: 9;
    }
}
